<template>
    <div id="emailRestPwd">
        <MipLightbox>
            <template v-slot:slot1>
                <el-button type="primary" class="modelfy_row emailRestPwd" @click="dialogFormVisible = true">通过邮箱重置密码
                </el-button>

                <!-- Form -->
                <el-dialog title="通过邮箱重置密码" :visible.sync="dialogFormVisible" width="35%">
                    <p class="t_Phone">当前邮箱：{{$store.state.user.email}}</p>
                    <div>
                        <el-link type="primary" class="vCode" @click.prevent="captcha" :disabled="disabled">
                            <span v-if="!disabled">获取验证码</span>
                            <span v-if="disabled">({{num}})获取验证码</span>
                        </el-link>
                    </div>
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                             class="demo-ruleForm">
                        <el-form-item label="验证码" :label-width="formLabelWidth" prop="EmailVCode">
                            <el-input v-model="ruleForm.EmailVCode" placeholder="请输入邮箱验证码"
                                      autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" :label-width="formLabelWidth" prop="pwd">
                            <el-input v-model="ruleForm.pwd" placeholder="请输入新的登录密码"
                                      autocomplete="off" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
                            <el-input v-model="ruleForm.checkPass" placeholder="请再次输入新密码"
                                      autocomplete="off" show-password></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click.prevent="submitForm('ruleForm')">确 定</el-button>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                    </div>
                </el-dialog>
            </template>
        </MipLightbox>
    </div>
</template>

<script>

    import {Button, Dialog, Form, FormItem, Input, Link, MessageBox} from "element-ui"
    import MipLightbox from "@/components/miplightbox/MipLightbox";
    import {post} from "@/request/AxiosMAX";

    export default {
        name: "EmailRestPwd",
        data() {
            var validate2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新的登录密码'));
                } else {
                    if (this.ruleForm.pwd !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validate3 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }

            return {
                disabled:false,
                num:60,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                ruleForm: {
                    //后台验证码
                    verification: '',
                    //用户输入验证码
                    EmailVCode: '',
                    pwd: '',
                    checkPass: ''
                },
                rules: {
                    EmailVCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ],
                    pwd: [
                        {required: true, validator: validate2, trigger: 'blur'},
                        {min:6,max:20,message:'密码长度为6 - 18个字符',trigger:'change'}
                    ],
                    checkPass: [
                        {required: true, validator: validate3, trigger: 'blur'},
                        {min:6,max:20,message:'密码长度为6 - 18个字符',trigger:'change'}
                    ]
                }
            }
        },
        components: {
            MipLightbox,
            "el-button": Button,
            "el-dialog": Dialog,
            "el-form": Form,
            "el-form-item": FormItem,
            "el-input": Input,
            "el-link": Link
        },
        methods: {
            // 获取邮箱验证码
            captcha() {
                //定时器
                let num = 60;
                this.disabled=true;
                let  setInter=setInterval(()=>{
                    this.num = --num;
                    if(this.num===0){
                        this.disabled=false;
                        clearInterval(setInter);
                    }
                },1000);
                post("/api/Studies_to_travel/BaseRegister/emailVerification", {email: this.$store.state.user.email})
                    .then(res => {
                        if (res.code === 0) {
                            console.log("邮箱验证码" + res.data);
                            //获取后台验证🐎
                            this.ruleForm.verification = res.data;
                            this.$message({
                                message: '发送成功',
                                type: 'success'
                            });
                        }else{
                            this.$message({
                                message: '发送失败',
                                type: 'success'
                            });
                        }
                    }).catch(err => {
                    console.info(err);
                });
            },
            submitForm(formName) {
                MessageBox.confirm('修改密码之后需要重新登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.ruleForm.verification === this.ruleForm.EmailVCode) {
                                let user = this.$store.state.user;
                                user.pwd = this.ruleForm.pwd;
                                post("/api/Studies_to_travel/BaseRegister/updateById", user)
                                    .then(res => {
                                        this.$refs[formName].resetFields();
                                        if (res.code === 0) {
                                            this.dialogFormVisible = false;
                                            this.$message({
                                                message: '提交成功',
                                                type: 'success'
                                            });
                                            //清空本地缓存
                                            localStorage.clear();
                                            //重新登录
                                            this.$router.push("/login");
                                        }else{
                                            this.$message({
                                                message: '提交失败',
                                                type: 'success'
                                            });
                                        }
                                    }).catch(err => {
                                    console.log(err);
                                });
                            }else{
                                this.$message({
                                    message: '验证码输入错误',
                                    type: 'FAIL'
                                });
                            }
                        }
                    });
                })

            }
        }
    }
</script>

<style scoped>

    .modelfy_row {
        width: 280px;
        margin: 1% 0% 1% 6%;
    }

    .t_Phone {
        margin-bottom: 4%;
    }

    .vCode {
        position: absolute;
        right: 28%;
        top: 21%;
    }

</style>
